---
title: <media-mute-button>
description: Media Mute Button
layout: ../../../../layouts/ComponentLayout.astro
source: https://github.com/muxinc/media-chrome/tree/main/src/js/media-mute-button.js
---

import SandpackContainer from "../../../../components/SandpackContainer.astro";
import CopyToClipboard from "../../../../components/PageContent/CopyToClipboard.astro";

The `<media-mute-button>` component is used to toggle the sound of the media. The icon will display whether sound is enabled and the general volume level.

The content of the `<media-mute-button>` will update based on the audio volume.
- When the volume is off, the component will display the contents of the `off` slot.
- When the volume is low, 0-50%, the component will display the contents of the `low` slot.
- When the volume is medium, 50-75%, the component will display the contents of the `medium` slot.
- When the volume is high, 75-100%, the component will display the contents of the `high` slot.

## Default usage

<SandpackContainer
  editorHeight={265}
  html={`<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
  </video>
  <media-control-bar>
    <media-mute-button></media-mute-button>
    <media-volume-range></media-volume-range>
  </media-control-bar>
</media-controller>`}
/>

## Customize icons

You can modify the contents of the `<media-mute-button>` componnt using slots.
This is useful if you'd like to use your own custom mute button instead of the default one provided by media-chrome.

Here's an example of how you can replace the volume levels with the words that correspond to the level.

<SandpackContainer
  editorHeight={365}
  html={`<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
  </video>
  <media-control-bar>
    <media-volume-range></media-volume-range>
    <media-mute-button>
      <span slot="high">High</span>
      <span slot="medium">Medium</span>
      <span slot="low">Low</span>
      <span slot="off">Off</span>
    </media-mute-button>
  </media-control-bar>
</media-controller>`}
/>

Alternatively, if you would like to represent all of the volume levels using a single element you could use the `icon` slot instead. This is useful for creating an animated icon that transitions between states. Here's a basic example that uses CSS to change an element based on the volume level.

<SandpackContainer
  height={365}
  active="css"
  html={`<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-control-bar>
    <media-mute-button>
      <span class="my-icon" slot="icon"></span>
    </media-mute-button>
    <media-volume-range></media-volume-range>
  </media-control-bar>
</media-controller>`}
css={`.my-icon {
  border-radius: 50%;
  height: 100%;
  width: 24px;
  background: red;
  transition: background .4s;
}
media-mute-button[mediavolumelevel='low'] .my-icon {
  background: lightyellow;
}
media-mute-button[mediavolumelevel='medium'] .my-icon {
  background: lightblue;
}
media-mute-button[mediavolumelevel='high'] .my-icon {
  background: lightgreen;
}
`}
/>

## Styling with attributes

The `<media-mute-button>` doesn't expose any configuration attributes.
However, it will be updated with [Media UI Attributes](#media-ui-attributes) any time the volume level changes.

You can use these attributes to style the button. For example, turn the background color red when the media is muted.

```css
media-mute-button[mediavolumelevel="off"] {
  --media-control-background: red;
}
```
